<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>日程表查看</title>
    <!-- Custom fonts for this template-->
    <link th:href="@{/vendor/fontawesome-free/css/all.min.css}" rel="stylesheet" type="text/css">
    <!-- Page level plugin CSS-->
    <link th:href="@{/vendor/datatables/dataTables.bootstrap4.css}" rel="stylesheet">
    <!-- Custom styles for this template-->
    <link th:href="@{/css/sb-admin.css}" rel="stylesheet">
    <!-- Bootstrap core JavaScript-->
    <script th:src="@{/vendor/jquery/jquery.min.js}"></script>
    <script th:src="@{/vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>
    <!-- Core plugin JavaScript-->
    <script th:src="@{/vendor/jquery-easing/jquery.easing.min.js}"></script>
    <!-- Page level plugin JavaScript-->
    <script th:src="@{/vendor/datatables/jquery.dataTables.js}"></script>
    <script th:src="@{/vendor/datatables/dataTables.bootstrap4.js}"></script>
    <!-- Custom scripts for all pages-->
    <script th:src="@{/js/sb-admin.min.js}"></script>
    <!-- Demo scripts for this page-->
    <script th:src="@{/js/demo/datatables-demo.js}"></script>
</head>
<body  id="page-top">


<nav class="navbar navbar-expand navbar-dark bg-dark static-top">

    <a class="navbar-brand mr-1" th:href="@{/user/index}">日程云共享管理系统</a>


    <!-- Navbar -->
    <ul class="navbar-nav ml-auto ml-md-12">

        <div th:if="${session.loginUser!=null}">
            <p th:text="${session.loginUser.getUsername()}" style="color:white"> </p>
        </div>
        <li class="nav-item dropdown no-arrow">
            <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-user-circle fa-fw"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
                <a class="dropdown-item" href="#">个人设置</a>
                <a class="dropdown-item" th:href="@{/reset-password}">修改密码</a>
                <div class="dropdown-divider"></div>
                <div th:if="${session.loginUser!=null}">
                    <a class="dropdown-item" th:href="@{/logout}" data-toggle="modal" data-target="#logoutModal">注销</a>
                </div>
            </div>
        </li>
    </ul>

</nav>

<div id="wrapper">

    <!-- Sidebar -->
    <ul class="sidebar navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">
                <i class="fas fa-fw fa-tachometer-alt"></i>
                <span>Dashboard</span>
            </a>
        </li>
        <li class="nav-item ">
            <a class="nav-link" th:href="@{/share/community}">
                <i class="fas fa-fw fa-chart-area"></i>
                <span>用户共享社区</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" th:href="@{/user/toScheduleframework}">
                <i class="fas fa-fw fa-chart-area"></i>
                <span>日程框架</span></a>
        </li>
        <li class="nav-item active">
            <a class="nav-link" th:href="@{/scheduletable/toScheduletable}">
                <i class="fas fa-fw fa-table"></i>
                <span>日程表</span></a>
        </li>
        <li class="nav-item ">
            <a class="nav-link" th:href="@{/scheduletemplate/toTemplate}">
                <i class="fas fa-fw fa-table"></i>
                <span>日程模版</span></a>
        </li>
        <li class="nav-item " shiro:hasRole="admin">
            <a class="nav-link" th:href="@{/admin/list}">
                <i class="fas fa-fw fa-table"></i>
                <span>用户列表</span></a>
        </li>
    </ul>

    <div id="content-wrapper">

        <div class="container-fluid">

            <!-- Breadcrumbs-->
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="#">Dashboard</a>
                </li>
                <li class="breadcrumb-item active">日程表</li>
            </ol>



            <!-- Page Content -->

            <div class="card mb-3">
                <div class="card-header">
                    <i class="fas fa-table"></i>
                    日程表
                    <div style="float: right">
                        <table >
                            <tr>
                                <th>
                                    <button class="btn btn-primary"  id="export">导出</button>
                                </th>
                                <th th:if="${msg.get('table').getUserId()==session.loginUser.getId()}">
                                    <button class="btn btn-primary"  id="schedule_add_model_btn">手工添加日程</button>
                                </th>
                                <th th:if="${msg.get('table').getUserId()==session.loginUser.getId()}">
                                    <button class="btn btn-primary"  id="schedule_addList_model_btn">批量添加日程</button>
                                </th>
<!--                                <th th:if="${msg.get('table').getUserId()==session.loginUser.getId()}">-->
<!--                                    <a class="btn btn-primary"  href="#">复制日程</a>-->
<!--                                </th>-->
                                <th th:if="${msg.get('table').getUserId()==session.loginUser.getId()}">
                                    <button class="btn btn-primary"  id="schedule_del_model_btn">删除日程</button>
                                </th>
                                <th>
                                    <button class="btn btn-primary"  th:onClick="self.location=document.referrer;">返回上一页</button>
                                </th>
                            </tr>
                        </table>
                    </div>
                </div>

                <!-- 日程表不为空  -->
                <div class="card-body" >
                    <div class="table-responsive">
                        <div class="lead" >
                            <p>
                                <a>名字:</a><a style="color:red" th:text="${msg.get('table').getName()}" id="table_name"></a>&nbsp;&nbsp;&nbsp;
                                <a>天数:</a><a style="color:red" th:text="${msg.get('size')}"></a>&nbsp;&nbsp;&nbsp;
                                <a>周数:</a><a style="color:red" th:text="${msg.get('size')/7}"></a>

                            </p>
                        </div>

                        <table class="table table-bordered text-nowrap" id="table">
                            <thead id="table_thead">
                                <tr id="table_thead_tr">
                                    <th>~</th>
                                </tr>
                            </thead>
                            <tbody id="table_tbody">

                            </tbody>
                        </table>

                    </div>
                </div>
                <div th:if="${list!=null}" class="alert alert-success" role="alert">
                    <a th:text="${list.get('result')}" style="color:red"> </a>
                </div>
        </div>
    </div>

        </div>
        <!-- /.container-fluid -->

        <!-- Sticky Footer -->
        <footer class="sticky-footer">
            <div class="container my-auto">
                <div class="copyright text-center my-auto">
                    <span>Copyright © Your Website 2019</span>
                </div>
            </div>
        </footer>

    </div>
    <!-- /.content-wrapper -->

</div>
<!-- /#wrapper -->

<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
</a>

<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">确定退出登录吗?</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">如果您准备结束当前会话，请在下面选择“退出”。</div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
                <a class="btn btn-primary" th:href="@{/logout}">退出</a>
            </div>
        </div>
    </div>
</div>

<!--查看日程的模态框-->
<div class="modal" id="scheduleViewModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">日程查看</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form >
                    <!--id -->
                    <div class="form-group row" hidden>
                        <label  class="col-sm-4 col-form-label">id</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control"  id="view_id">
                        </div>
                    </div>
                    <!--日程名 -->
                    <div class="form-group row">
                        <label  class="col-sm-4 col-form-label">日程名</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control"  id="view_name" disabled>
                        </div>
                    </div>
                    <!--日期 -->
                    <div class="form-group row">
                        <label  class="col-sm-4 col-form-label">日期</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control"  id="view_date" disabled>
                        </div>
                    </div>
                    <!--地点 -->
                    <div class="form-group row">
                        <label  class="col-sm-4 col-form-label">地点</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control"  id="view_place" disabled>
                        </div>
                    </div>
                    <!--备注 -->
                    <div class="form-group row">
                        <label  class="col-sm-4 col-form-label">备注</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control"  id="view_comments" disabled>
                        </div>
                    </div>
                    <!--时间段 -->
                    <div class="form-group row">
                        <label  class="col-sm-4 col-form-label">时间段</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control"  id="view_time" disabled>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!--添加日程的模态框-->
<div class="modal" id="scheduleAddModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">手工添加日程</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="post"  th:action="@{'/scheduletable/view/'+${msg.get('table').getId()}+'/createSchedule'}" th:object="${scheduleVO}">
                    <!--日程名 -->
                    <div class="form-group row">
                        <label  class="col-sm-4 col-form-label">日程名</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control"  th:field="*{name}" required>
                        </div>
                    </div>
                    <!--地点 -->
                    <div class="form-group row">
                        <label  class="col-sm-4 col-form-label">地点</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control"  th:field="*{place}" required>
                        </div>
                    </div>
                    <!--备注 -->
                    <div class="form-group row">
                        <label  class="col-sm-4 col-form-label">备注</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control"  th:field="*{comments}">
                        </div>
                    </div>
                    <!--日期 -->
                    <div class="form-group row">
                        <label  class="col-sm-4 col-form-label">日期</label>
                        <div class="col-sm-8">
                            <select class="form-control"  id="date" th:field="*{date}" required>

                            </select>
                        </div>
                    </div>
                    <!--时间段 -->
                    <div class="form-group row">
                        <label  class="col-sm-4 col-form-label">时间段</label>
                        <div class="col-sm-8">
                            <select class="form-control"  id="time" th:field="*{time}" required>

                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary"  >新增</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!--批量添加日程的模态框-->
<div class="modal" id="scheduleAddListModal" tabindex="-1" role="dialog">
    <div class="modal-dialog " role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">批量添加日程</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="post"   th:action="@{'/scheduletable/view/'+${msg.get('table').getId()}+'/createScheduleWithTemplate'}">
                    <!-- 所选择的日程模版-->
                    <div class="form-group row">
                        <label  class="col-sm-4 col-form-label">选择一个日程模版:</label>
                        <div class="col-sm-8">
                            <select class="form-control"  id="template" name="templateId">

                            </select>
                        </div>
                    </div>
                    <!--日程名 -->
                    <div class="form-group row">
                        <label  class="col-sm-4 col-form-label">日程名</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control"  id="template_name" disabled>
                        </div>
                    </div>
                    <!--地点 -->
                    <div class="form-group row">
                        <label  class="col-sm-4 col-form-label">地点</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control"  id="template_place" disabled>
                        </div>
                    </div>
                    <!--备注 -->
                    <div class="form-group row">
                        <label  class="col-sm-4 col-form-label">备注</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control"  id="template_comments" disabled>
                        </div>
                    </div>
                    <div>
                        <p style="color: red" class="lead">请选择日期范围和时间段</p>
                    </div>
                    <!--日期 -->
                    <div class="form-group row">
                        <label  class="col-sm-4 col-form-label">日期</label>
                        <div class="col-sm-8">
                            <input type="date" class="form-control"  id="template_startDate" name="startDate" required>
                        </div>
                    </div>
                    <!--日期 -->
                    <div class="form-group row">
                        <label  class="col-sm-4 col-form-label">日期</label>
                        <div class="col-sm-8">
                            <input type="date" class="form-control"  id="template_endDate" name="endDate" required>
                        </div>
                    </div>
                    <!--时间段 -->
                    <div class="form-group row">
                        <label  class="col-sm-4 col-form-label">时间段</label>
                        <div class="col-sm-8">
                            <select class="form-control"  id="template_time"  required name="times">

                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary"  >新增</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!--删除日程的模态框-->
<div class="modal" id="scheduleDelModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">日程删除</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <table class="table table-hover" id="schedules_table">
                        <thead>
                            <tr>
                                <th>
                                    <input type="checkbox" id="check_all"/>
                                </th>
                                <th hidden>id</th>
                                <th>日程名</th>
                                <th>日期</th>
                                <th>地点</th>
                                <th>备注</th>
                                <th>时间段</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary"  id="delete_btn">删除</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>

    //页面加载完成以后，直接去发送ajax请求，构建当前日程表
    $(function () {
        view();
    });

    function view() {
        $.ajax({
            url:"http://localhost:8088/scheduletable/view/"+[[${msg.get('table').getId()}]]+"/all",
            type:"GET",
            success:function(result){
                console.log(result);
                //日期
                var days=result.extend.days;
                $.each(days,function (index,item) {
                    $("<th ></th>").append(item).appendTo("#table_thead_tr");
                });
                //时间段
                var times=result.extend.times;
                $.each(times,function (index,item) {
                    TR=$("<tr></tr>").append($("<th></th>").append(item));
                    for(var i=0;i<days.length; i++){
                        TR.append($("<th ></th>").append("&nbsp;"));
                    }
                    TR.appendTo("#table_tbody");
                });
                //日程
                var schedules=result.extend.schedules;
                if(schedules==null || schedules==""){
                    return alert("该日程表为空");
                }
                $.each(schedules,function (index,item) {
                    for(var i=0;i<=times.length;i++){
                        for(var j=0;j<=days.length;j++){
                            if(item.date==document.getElementById("table").rows[0].cells[j].innerHTML && item.time==document.getElementById("table").rows[i].cells[0].innerHTML){
                                document.getElementById("table").rows[i].cells[j].innerHTML=item.name;
                                document.getElementById("table").rows[i].cells[j].style.backgroundColor="#00FFFF";
                                document.getElementById("table").rows[i].cells[j].style.cursor="pointer";
                                document.getElementById("table").rows[i].cells[j].onclick=function () {
                                    // alert(item.id);
                                    $.ajax({
                                        url:"http://localhost:8088/scheduletable/getSchedule/"+item.id,
                                        type:"GET",
                                        success:function (result) {
                                            console.log(result);
                                            var data=result.extend.schedule;
                                            $("#view_id").val(data.id);
                                            $("#view_name").val(data.name);
                                            $("#view_date").val(data.date);
                                            $("#view_place").val(data.place);
                                            $("#view_comments").val(data.comments);
                                            $("#view_time").val(data.time);
                                            $('#scheduleViewModal').modal({
                                                backdrop: "static"
                                            });
                                        }
                                    });
                                };
                            }
                        }
                    }
                });
            }
        });
    }

    //获取当前日程表所使用的日程框架下的所有日程框架项
    function getFrameworkAndTerms(ele,scheduletableId){
        $(ele).empty();
        $.ajax({
            url:"http://localhost:8088/scheduletable/view/"+scheduletableId+"/all",
            type:"GET",
            success:function (result) {
                console.log(result);
                if(ele=="#date") {
                    $.each(result.extend.days, function (index, item) {
                        var optionEle = $("<option></option>").append(item).attr("value", item);
                        optionEle.appendTo(ele);
                    });
                }if(ele=="#time"){
                    $.each(result.extend.times, function (index, item) {
                        var optionEle = $("<option></option>").append(item).attr("value", item);
                        optionEle.appendTo(ele);
                    });
                } if(ele=="#template_startDate") {
                    var days=result.extend.days;
                    $("#template_startDate").val(days[0]);
                    $("#template_endDate").val(days[days.length-1]);
                }if(ele=="#template_time"){
                    $.each(result.extend.times, function (index, item) {
                        var optionEle = $("<option></option>").append(item).attr("value", item);
                        optionEle.appendTo(ele);
                    });
                }
            }
        });
    }

    //点击添加日程，打开模态框
    $("#schedule_add_model_btn").click(function () {
        getFrameworkAndTerms("#date",[[${msg.get('table').getId()}]]);
        getFrameworkAndTerms("#time",[[${msg.get('table').getId()}]]);
        $('#scheduleAddModal').modal({
            backdrop: "static"
        });
    });

    //点击批量添加日程，打开模态框
    $("#schedule_addList_model_btn").click(function () {
        getFrameworkAndTerms("#template_startDate",[[${msg.get('table').getId()}]]);
        getFrameworkAndTerms("#template_time",[[${msg.get('table').getId()}]]);
        $("#template").empty();
        $("#template_name").empty();
        $("#template_place").empty();
        $("#template_comments").empty();
        $.ajax({
            url:"http://localhost:8088/scheduletemplate/getTemplates",
            type:"GET",
            success:function (result) {
                // console.log(result.extend.templates);
                var templates=result.extend.templates;
                if(JSON.stringify(templates)=="[]"){
                    alert("您还没创建日程模版，无法使用批量添加日程!");
                }else{
                    $.each(templates,function (index,item) {
                        var optionEle=$("<option></option>").append(item.templateName).attr("value",item.id);
                        optionEle.appendTo("#template")
                    });
                    $("#template_name").val(templates[0].name);
                    $("#template_place").val(templates[0].place);
                    $("#template_comments").val(templates[0].comments);
                    $('#scheduleAddListModal').modal({
                        backdrop: "static"
                    });
                }
            }
        });
    });

    //当改变所选择的日程模版，其余内容也随之改变
    document.getElementById("template").onchange=function () {
        var templateId=$("#template").val();
        // alert(templateId);
        $.ajax({
            url:"http://localhost:8088/scheduletemplate/getTemplate/"+templateId,
            type:"GET",
            success:function (result) {
                // console.log(result)
                var data=result.extend.template;
                // console.log(data);
                $("#template_name").val(data.name);
                $("#template_place").val(data.place);
                $("#template_comments").val(data.comments);
            }
        });
    };

    //点击删除日程，打开模态框
    $("#schedule_del_model_btn").click(function () {
        // getSchedules("#schedules_table tbody",[[${msg.get('table').getId()}]]);
        $("#schedules_table tbody").empty();
        $.ajax({
            url:"http://localhost:8088/scheduletable/view/"+[[${msg.get('table').getId()}]]+"/all",
            type:"GET",
            success:function (result) {
                var schedules=result.extend.schedules;
                if(JSON.stringify(schedules)=="[]"){
                    alert("该日程表为空，没有日程可以删除!")
                }else {
                    $.each(result.extend.schedules, function (index, item) {
                        console.log(result.extend.schedules)
                        var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>");
                        var idTd = $("<td hidden></td>").append(item.id);
                        var nameTd = $("<td></td>").append(item.name);
                        var dateTd = $("<td></td>").append(item.date);
                        var placeTd = $("<td></td>").append(item.place);
                        var commentsTd = $("<td></td>").append(item.comments);
                        var timeTd = $("<td></td>").append(item.time);
                        $("<tr></tr>").append(checkBoxTd).append(idTd).append(nameTd).append(dateTd).append(placeTd).append(commentsTd).append(timeTd).appendTo("#schedules_table tbody")
                        $('#scheduleDelModal').modal({
                            backdrop: "static"
                        });
                    });
                }
            }
        });
    });

    //全选/全不选
    $("#check_all").click(function () {
        // alert($(this).prop("checked"));
        $(".check_item").prop("checked",$(this).prop("checked"));
    });
    $(document).on("click",".check_item",function () {
        var flag=$(".check_item:checked").length==$(".check_item").length;
        $("#check_all").prop("checked",flag);
    });

    //点击删除按钮
    $("#delete_btn").click(function () {
        var scheduleNames="";
        var scheduleIds="";
        $.each($(".check_item:checked"),function () {
            scheduleNames += $(this).parents("tr").find("td:eq(2)").text()+",";
            scheduleIds += $(this).parents("tr").find("td:eq(1)").text()+"-";
        });
        scheduleNames=scheduleNames.substring(0,scheduleNames.length-1);
        scheduleIds=scheduleIds.substring(0,scheduleIds.length-1);
        if(confirm("确认删除日程["+scheduleNames+"]吗？")){
            $.ajax({
                url:"http://localhost:8088/scheduletable/view/"+[[${msg.get('table').getId()}]]+"/deleteSchedule/"+scheduleIds,
                type:"DELETE",
                success:function (result) {
                    alert(result.msg);
                    view();
                }
            });
        }
    });


    $("#export").click(function () {
        var html="<html><head><meta charset='utf-8' /></head><body>"+document.getElementById("table").outerHTML+ "</body></html>";
        var blob=new Blob([html],{type:"application/vnd.ms-excel"});
        var a=document.createElement('a');
        var name=document.getElementById("table_name").innerText+".xls";
        a.href=URL.createObjectURL(blob);
        a.download=name;
        a.click();
        a.remove();
        alert("已导出到浏览器的默认存储路径");
    });

</script>

</body>
</html>